$sidebar-width: 260px
$offset-height: 60px

.documentation-section,
.examples-section
  padding-bottom: 300px

  .container
    article
      width: 100%
      position: relative
      margin-top: 60px

  p,
  ul,
  ol
    font-size: 16px
    line-height: 22px

  ul
    margin: 0

    li
      padding: 0

    ul
      padding: 0 1em

  h2,h3,h4
    color: #201c38

  h2
    font-size: 28px
    padding-right: 1em
    margin-top: 32px
    padding-bottom: 8px

    &:first-of-type
      margin-top: 0

    +small-mq
      font-size: 22px

  h3
    margin-top: 32px
    font-size: 24px
    color: #201c38
    z-index: 10

  h4
    font-size: 18px
    font-weight: normal
    margin-top: 2em

  .api tr td:first-child
    vertical-align: top

    p, ul
      font-size: 90%
      margin: .5em 0
      line-height: 1.5em

    ul
      padding-left: 1.5em

    em
      text-decoration: underline
      font-style: normal

  .documentation-container
    float: left
    position: relative
    left: #{$sidebar-width}
    width: calc(100% - #{$sidebar-width})
    min-height: 1000px
    padding-left: 60px
    padding-top: 60px

    p, li:not(.ais-pagination--item)
      color: rgba(32, 28, 56, 0.8)
      line-height: 2
      font-size: 16px
      font-family: 'Open Sans', Helvetica Neue, helvetica, sans-serif
      clear: both

    ul,
    ol
      font-size: 16px
      line-height: 22px

      li:not(.ais-pagination--item)
        clear: both
        margin-bottom: 10px

      ul
        font-weight: normal
        font-size: 14px
        position: relative

        li:not(.ais-pagination--item)
          line-height: 26px

          &:before
            content: '-'
            float: left
            margin-right: 6px
            color: $logan

    img
      max-width: 100%

    .content
      & p:first-child
        margin-top: 0

    .heading
      background: #fff
      border: 1px solid #d8d8d8
      border-radius: 2px 2px 0 0
      margin: -8px 0 0
      padding: 0.75em 1em
      font-family: $paragraphs-font-family
      border-radius: 6px 6px 0 0
      font-size: 13px
      color: #8994c6
      font-weight: 400

      &+ pre
        border-top: none
        border-radius:  0 0 6px 6px

      button
        float: right
        background: #f1f4fd
        border: none
        padding: 2px 8px
        font-size: 90%
        border-radius: 2px

      .icon
        width: 12px

        svg
          width: 12px
          height: 12px

        use
          fill: #8794cb

    pre
      margin: 0 0 .5em 0
      line-height: 23px
      white-space: pre
      overflow-x: auto
      word-break: inherit
      word-wrap: inherit
      border: 1px solid #d8d8d8
      border-radius: 0 0 2px 2px
      padding: .5em 0
      position: relative
      z-index: 1
      background: #fff
      border-radius: 6px

      // avoid scroll bar being unusable because <code></code><h2></h2> used and headers have :content that will be over

      code
        display: block
        width: calc(100% - 2em)
        margin: auto


    p + div.heading
      margin-top: 1em

      + pre
        margin-bottom: 2em

    h2, h3, .api-entry, .css-class, .type
      &:before
        content: ""
        display: block
        height: $offset-height
        margin: (-$offset-height) 0 0

    .anchor
      margin-left: .2em
      display: inline
      visibility: hidden

    h2, h3
      .anchor
        text-decoration: none

      .anchor:after
        content: '#'
        color: $accent-color

      &:hover
        .anchor
          visibility: visible

      &:target
        .anchor
          visibility: visible

    .struct-def
      padding-left: 0
      margin-top: 24px

      .default-value
        font-size: 12px
        line-height: 16px
        code
          background: transparent

      .type
        list-style-type: none

        p
          margin-top: 0

    .editThisPage
      position: absolute
      font-size: 12px
      right: 0
      top: 12px
      padding: 3px 6px
      border: 1px solid darken($accent-color, 20%)
      color: darken($accent-color, 20%)
      border-radius: 3px
      text-transform: uppercase
      opacity: .7

      &:hover
        background: $accent-color
        color: $bunting
        opacity: 1
        text-decoration: none


  +small-mq
    padding-top: 32px

    .editThisPage
      display: none

    .container
      .documentation-container
        left: 0
        width: 100%
        padding: 32px 1em

      article
        float: left
        margin-top: 40px

    .documentation .hero-section
      .fl-left
        max-width: 300px !important
        width: 300px !important


  .typed-link
    color: inherit
    text-decoration: underline

.examples-section > .container
  padding-top: 60px

.storybook-section
  min-height: 120px
  text-align: center
  line-height: 120px

.img-object
  padding: 6px
  border: 1px solid rgba(black, 0.1)
  margin: 16px 0
  margin-right: 26px
  max-width: 100%
  max-height: 500px
  margin: auto

  &[align="right"]
    float: right
    margin-right: 0
    margin-left: 26px

    & + p:not(.cb)
      clear: none !important

    & ~ p:not(.cb)
      clear: none !important

  &[align="left"]
    float: left
    margin: 18px 0 16px
    margin-right: 26px

    & + p
      clear: none !important

    & ~ p
      clear: none !important

.documentation-container
  table
    border-collapse: collapse
    border-spacing: 0
    border: 1px solid #d8d8d8
    color: darken($logan, 15%)

  td, th
    padding: 0

  table, th, td

  table
    width: 100%
    display: table

  table.bordered > thead > tr, table.bordered > tbody > tr
    border-bottom: 1px solid #d0d0d0

  table.striped > tbody > tr:nth-child(odd)
    background-color: #f2f2f2

  table.striped > tbody > tr > td
    border-radius: 0
    padding: 0  8px !important

  table.highlight > tbody > tr
    transition: background-color 0.25s ease

  table.highlight > tbody > tr:hover
    background-color: #f2f2f2

  table.centered thead tr th, table.centered tbody tr td
    text-align: center

  thead,
  tbody > tr:not(:last-child)
    border-bottom: 1px solid #d0d0d0

  thead th
    color: darken($logan, 35%)

  td, th
    padding: 15px 5px
    display: table-cell
    text-align: left
    vertical-align: middle
    border-radius: 2px

  td,
  th
    padding: 15px 16px
    border-left: 1px solid #d0d0d0

  @media only screen and (max-width: 992px)
    table.responsive-table
      width: 100%
      border-collapse: collapse
      border-spacing: 0
      display: block
      position: relative

    table.responsive-table td:empty:before
      content: " "

    table.responsive-table th, table.responsive-table td
      margin: 0
      vertical-align: top

    table.responsive-table th
      text-align: left

    table.responsive-table thead
      display: block
      float: left

    table.responsive-table thead tr
      display: block
      padding: 0 10px 0 0

    table.responsive-table thead tr th::before
      content: " "

    table.responsive-table tbody
      display: block
      width: auto
      position: relative
      overflow-x: auto
      white-space: nowrap

    table.responsive-table tbody tr
      display: inline-block
      vertical-align: top

    table.responsive-table th
      display: block
      text-align: right

    table.responsive-table td
      display: block
      min-height: 1.25em
      text-align: left

    table.responsive-table tr
      padding: 0 10px

    table.responsive-table thead
      border: 0
      border-right: 1px solid #d0d0d0

    table.responsive-table.bordered th
      border-bottom: 0
      border-left: 0

    table.responsive-table.bordered td
      border-left: 0
      border-right: 0
      border-bottom: 0

    table.responsive-table.bordered tr
      border: 0

    table.responsive-table.bordered tbody tr
      border-right: 1px solid #d0d0d0


  .live-example
    border: 1px solid #d8d8d8
    padding: 20px

    h3
      margin-top: 0
      margin-bottom: 10px
      &:before
        height: 0
        margin: 0

    .live-example-helpers
      border-top: 1px solid #d8d8d8
      padding-top: 10px
      margin-top: 20px
